<template>
  <ul class="footer-box">
    <li>
        <!-- exact-active-class="active"=====严格模式 -->
        <router-link to="/" exact-active-class="active">
            <span class="iconfont icon-shouye"><br/>首页</span>
        </router-link>
    </li>
    <li>
        <router-link to="/Category" exact-active-class="active">
            <span class="iconfont icon-xinfeng"><br/>分类</span>
        </router-link>
    </li>
    <li>
        <router-link to="/ShoppingCar" exact-active-class="active">
            <span class="iconfont icon-gouwu"><br/>购物车</span>
        </router-link>
    </li>
    <li>
        <router-link to="/My" exact-active-class="active">
            <span class="iconfont icon-wode"><br/>我的</span>
        </router-link>
    </li>
  </ul>
</template>

<script>
export default {
    name:"FooterBar",
}
</script>

<style scoped>
@import url(../assets/iconfont1/iconfont/iconfont.css);

.footer-box{
    width: 100%;
    height: 3.3333rem;
    border-top: 1px solid gray;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.footer-box li{
    flex: 1;
    text-align: center;
    height: 100%;
    margin-top: .8333rem;
}
.active{
    color: red;
}
</style>